<template>
  <div class="box-shadow dev formList">
    <div style="height: 100%">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">

        <div>
          <i class="icon2"></i>
          <div class="headline2">
            <span>结算银行账户</span>
          </div>
        </div>
        <div class="dev2">
          <el-form-item label="账户类型">
            {{accountType}}
          </el-form-item>
          <el-form-item label="开户名称">
            {{form.account_name}}
          </el-form-item>
          <el-form-item label="开户行" prop="account_bank">
            <el-select
              v-model="form.account_bank"
              placeholder="请选择开户行"
              clearable
              size="medium"
              :filterable="filterable"
            >
              <el-option
                v-for="dict in accountBankOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              />
            </el-select>

          </el-form-item>

          <el-form-item label="所属城市">

            <el-row>
              <el-col :span="6">
                <el-select
                  v-model="province"
                  placeholder="请选择省份"
                  clearable
                  size="medium"
                  @change="getCityOptions"
                >
                  <el-option
                    v-for="dict in provinceOptions"
                    :key="dict.addCode"
                    :label="dict.addName"
                    :value="dict.addCode"
                  />
                </el-select>
              </el-col>
              <el-col :span="6" style="margin: 0 10px">
                <el-select v-model="dict" :filterable="filterable" placeholder="请选择城市" clearable size="medium">
                  <el-option
                    v-for="dict in cityOptions"
                    :key="dict.addCode"
                    :label="dict.addName"
                    :value="dict.addCode"
                  />
                </el-select>

              </el-col>


            </el-row>

          </el-form-item>
          <el-form-item label="银行账号" prop="account_number">
            <el-input v-model="form.account_number"></el-input>
          </el-form-item>


          <el-form-item label="请输入支行全称" prop="bank_name">
            <el-input v-model="form.bank_name"></el-input>
            <p style="font-size: 13px; color: #00000080; font-weight: 300">
              <a @click="derive()">《开户银行全称（含支行）对照表》</a>
            </p>
          </el-form-item>


          <el-form-item>
            <div style="margin-left: 130%;display:flex;margin-bottom:20px">
              <el-button type="primary" @click="submitForm">提交并保存</el-button>
              <el-button @click="returnIndex">返回</el-button>
            </div>

          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
  import {getBankAccountInfo, addBankAccountInfo, getWechatArea, getAddCitycode} from '@/api/applet/payAudit'
  import imageUpload from '@/components/ImageUpload'

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {imageUpload},
    props: { //组件传值
      bankAccountInfoStr: {
        type: Boolean,
        default: true,
      },
      indexStr: {
        type: Boolean,
        default: true,
      },
      businessCodeStr: {
        type: String,
        default: '',
      }
    },
    data() {
      //这里存数据
      return {
        //授权单对象
        payAudit: {},
        //是否开启选择器搜索
        filterable: true,
        //开户银行列表
        accountBankOptions: [],
        //省列表
        provinceOptions: [],
        //城市列表
        cityOptions: [],
        //支行列表
        subBranchOptions: [],
        //选择的支行
        bank_branch_id: null,
        //选择的省份
        province: null,
        //选择的城市
        dict: null,
        accountType: null,
        form: {},
        // 查询参数
        queryParams: {},
        // 表单校验
        rules: {
          account_bank: [
            {
              required: true,
              message: "开户行不能为空",
              trigger: "blur",
            },
          ],
          account_number: [
            {
              required: true,
              message: "银行账号不能为空",
              trigger: "blur",
            },
            {
              min: 9,
              max: 30,
              message: "长度在 9 到 30 个字符",
              trigger: "blur",
            },
          ],
          bank_name: [
            {
              required: true,
              message: "支行名称不能为空",
              trigger: "blur",
            },
          ],
          bank_branch_id: [
            {
              required: true,
              message: "请选择城市",
              trigger: "blur",
            },
          ]
        }

      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      returnIndex() {
        window.scrollTo(0, 0);
        this.$emit("update:bankAccountInfoStr", false);
        this.$emit("update:indexStr", true);
        this.$emit('getData', null)
      },
      getSubjectInfo() {
        getBankAccountInfo(this.businessCodeStr).then((response) => {
          this.getCityOptions()
          this.form = response.data.bankAccountInfo
          this.payAudit = response.data
          this.accountType = this.form.bank_account_type == "BANK_ACCOUNT_TYPE_CORPORATE" ? "对公银行账户" : "经营者个人银行卡"
          this.bank_branch_id = this.form.bank_branch_id

          getAddCitycode(this.form.bank_address_code).then((response) => {
            this.province = response.data.addCitycode
            this.getCityOptions()
            this.dict = this.form.bank_address_code
          })

        })
      },
      /** 提交按钮 */
      submitForm() {
        this.form.bank_address_code = this.dict
        this.form.bank_branch_id = this.bank_branch_id
        this.$refs.form.validate((valid) => {
          if (valid) {
            addBankAccountInfo(this.form, this.payAudit.businessCode).then((response) => {
              this.msgSuccess('提交成功')
              this.open = false
              this.returnIndex()
            })
          }
        })
      },
      /** 查询城市 */
      getCityOptions() {
        this.cityOptions = null
        getWechatArea(this.province).then((response) => {
          this.cityOptions = response.data
        })
      },
      /** 导出按钮操作 */
      derive() {
        this.download('wechat/pay/audit/download', {}, `《开户银行全称（含支行）对照表.xlsx`)
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      var addCitycode = " ";
      this.getSubjectInfo();

      this.getDicts('wachat_bank').then((response) => {
        this.accountBankOptions = response.data
      }),
        this.getDicts('wechat_sub_branch').then((response) => {
          this.subBranchOptions = response.data
        }),
        getWechatArea(addCitycode).then((response) => {
          this.provinceOptions = response.data
        })
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>

  .icon1 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }

  .icon2 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline2 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
    margin-top: 20px;
  }


  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .dev {
    margin-left: 10%;
    margin-top: 5%;
    width: 70%;
    height: 700px;
  }

  .dev2 {
    margin-left: 10%;
    margin-top: 2%;
    width: 50%;

  }
</style>
